import { createRouter, createWebHistory } from 'vue-router'
import Login from '@/views/Login/index.vue'
import Layout from '@/views/Layout/index.vue'
//二级路由=>路由懒加载
const Home = () => import('@/views/Home/index.vue')
const Category = () => import('@/views/Category/index.vue')
const SubCategory = () => import('@/views/SubCategory/index.vue')
import Detail from '@/views/Detail/index.vue'
const CartList=()=>import('@/views/CartList/index.vue')
const CheckOut=()=>import('@/views/CheckOut/index.vue')
const Pay=()=>import('@/views/Pay/index.vue')
const PayBack =()=>import('@/views/Pay/PayBack.vue')
const Member=()=>import('@/views/Member/index.vue')
// 创建路由
const router = createRouter({
  // 使用WebHistory路由模式
  history: createWebHistory(import.meta.env.BASE_URL),
  // 定义路由
  routes: [
    // 第一个路由
    {path:'/', component:Layout,
      // 子路由
      children:[
        // 默认二级路由 path为空 当访问默认一级路由时 二级路由也会加载
        {path:'', component:Home},
        // 子路由2
        {path:'category/:id', component:Category},
        {path:'category/sub/:id', component:SubCategory},
        {path:'detail/:id', component:Detail},
        {path:'cartList', component:CartList},
        {path:'checkout', component:CheckOut},
        {path:'pay', component:Pay},
        {path:'paycallback', component:PayBack},
        {path:'member', component:Member,
          children:[
            // 为空时 三级路由随着二级路由一起显示
            {path:'', component:()=>import('@/views/Member/components/UserInfo.vue')},
            {path:'order', component:()=>import('@/views/Member/components/UserOrder.vue')},
          ]
        },
      ]
    },
    // 第二个路由
    {path:'/login', component:Login}
  ],
  // 路由跳转后滚动行为
  scrollBehavior(to, from, savedPosition) {
    // 始终滚动到顶部
    return { top: 0 }
  },
})

export default router
